<template>
    <div class="formData-management">
        <div class="table-wrapper" v-show="showformData">
            <el-button type="primary" size="mini" @click="showformDataFrom">添加商品</el-button>
            <el-table
                    v-loading="loading"
                    :data="formData"
                    style="width: 100%">
                <el-table-column
                        label="产品名称"
                        width="100"
                        prop="name">
                </el-table-column>
                <el-table-column
                        label="产品价格"
                        width="100"
                        prop="price">
                    <template slot-scope="scope">
                        {{scope.row.price}}元
                    </template>
                </el-table-column>
                <el-table-column
                        label="产品类型"
                        width="100"
                        prop="type">
                    <template slot-scope="scope" v-if="categories.length>0">
                        {{categories[scope.row.type]}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="库存"
                        width="50"
                        prop="stock">
                </el-table-column>
                <el-table-column
                        label="销售量"
                        width="70"
                        prop="sellCount">
                </el-table-column>
                <el-table-column
                        label="产品图片"
                        width="100"
                        prop="image">
                    <template slot-scope="scope">
                        <el-image v-if="scope.row.image!=null" :src="scope.row.image"></el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        label="产品评分"
                        width="100"
                        prop="rating">
                </el-table-column>
                <el-table-column
                        label="产品状态"
                        width="100"
                        prop="status">
                    <template slot-scope="scope">
                        {{scope.row.status==1?'在架':'下架'}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="产品描述"
                        prop="description">
                </el-table-column>
                <el-table-column
                        width="260"
                        align="right">
                    <template v-slot:header>
                        <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"
                                @input="getPage"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-wrapper">
                <el-pagination
                        background
                        layout="sizes,prev, pager, next, jumper, ->, total,slot"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        :page-count="10"
                        :total="total"
                        :page-sizes="pageSizes"
                        @current-change="getPage"
                        @size-change="sizeChange"
                ></el-pagination>
            </div>
        </div>
        <div class="add-form-wrapper" v-if="showAddForm">
            <el-button type="primary" size="mini" @click="back">返回</el-button>
            <add-product-form></add-product-form>
        </div>
        <div class="update-form-wrapper" v-if="showUpdateForm">
            <el-button type="primary" size="mini" @click="exit">退出编辑</el-button>
            <update-product-form :data-form="currentProduct"></update-product-form>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import AddProductForm from "../AddProductForm/AddProductForm";
    import UpdateProductForm from "../UpdateProductForm/UpdateProductForm";

    export default {
        data() {
            return {
                showformData: true,
                showAddForm: false,
                showUpdateForm: false,
                categories: [],
                search: '',
                currentPage: 1,
                pageSize: 10,
                total: 50,
                pageSizes: [10, 20, 30, 40, 50, 100],
                formData: [{
                    id: '',
                    name: '',
                    type: '',
                    price: '',
                    old_price: '',
                    image: '',
                    description: '',
                    rating: '',
                    status: '',
                }],
                currentProduct: {
                    name: '',
                    type: '',
                    price: '',
                    url: '',
                    description: '',
                    stock: '',
                    status: ''
                },
                loading: false
            }
        },
        methods: {
            handleEdit(index, product) {
                this.currentProduct = product;
                this.currentProduct.status=this.currentProduct.status.toString();
                this.currentProduct.type=this.currentProduct.type.toString();
                this.showformData = false;
                this.showUpdateForm = true;
            },
            handleDelete(index, product) {
                this.$http.get("/api/product/delete", {
                    params: {
                        id: product.id
                    }
                }).then((response) => {
                    response = response.data;
                    if (response.code === 0) {
                        this.getPage();
                        this.$message({
                            message: response.msg,
                            type: 'success',
                            customClass: 'alert-shadow'
                        });
                    } else {
                        this.$message({
                            message: response.msg,
                            type: 'error',
                            customClass: 'alert-shadow'
                        });
                    }
                })
            },
            getPage() {
                this.loading = true;
                this.$http.get("/api/products", {
                    params: {
                        page: this.currentPage,
                        size: this.pageSize,
                        searchName: this.search
                    }
                }).then((response) => {
                    this.loading = false;
                    this.total = response.data.total;
                    this.formData = response.data.records;
                })
            },
            sizeChange(size) {
                this.pageSize = size;
                this.getPage();
            },
            showformDataFrom() {
                this.showformData = false;
                this.showAddForm = true;
            },
            back() {
                this.getPage();
                this.showformData = true;
                this.showAddForm = false;
            },
            exit() {
                this.getPage();
                this.showformData = true;
                this.showUpdateForm = false;
            }
        },
        created() {
            this.getPage();
            this.$http.get('/api/category/list').then((response) => {
                response.data.forEach((item) => {
                    this.categories[item.type] = item.name;
                });
            });
            // eslint-disable-next-line no-console
            // console.log(this.categories)
        },
        components: {UpdateProductForm, AddProductForm}
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .formData-management {
        margin 10px
        padding 10px
        box-shadow 0 0 10px darkgrey
        border-radius 10px

        .table-wrapper {
            .pagination-wrapper {
                width 600px
                margin auto
            }
        }
    }
</style>
